<template>
  <div class="article_container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="状态：">
          <el-radio-group v-model="status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已排除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <el-select v-model="channel_id" placeholder="请选择频道">
            <el-option
              v-for="ele in channels"
              :key="ele.id"
              :label="ele.name"
              :value="ele.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期：">
          <el-col :span="11">
            <el-date-picker
              v-model="rangeData"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-col>
          <!-- <el-col class="line" :span="2">-</el-col> -->
          <!-- <el-col :span="11">
          <el-time-picker
            placeholder="选择时间"
            v-model="form.date2"
            style="width: 100%"
          ></el-time-picker>
        </el-col> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickSelect" :disabled="isloading"
            >筛选</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <div class="select_box">
      <!-- // 表单 -->
    </div>

    <el-card class="box-card" style="margin-top: 60px" v-loading="isloading">
      <div slot="header" class="clearfix">
        根据内容共筛选了{{ total }}条数据
      </div>
      <el-table
        :data="articleList"
        style="width: 100%"
        stripe
        empty-text="暂无数据"
      >
        <el-table-column label="封面" width="180" class="img">
          <template slot-scope="scope">
            <!-- <img
              
              :src="
                scope.row.cover.images[0] ||
                require('../../assets/image/icon/pic_bg.png')
              "
              alt=""
            /> -->
            <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.cover.images[0]"
              lazy
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="warning">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success"
              >审核通过</el-tag
            >
            <el-tag v-else-if="scope.row.status === 3" type="danger"
              >审核失败</el-tag
            >
            <el-tag v-else-if="scope.row.status === 4" type="info"
              >已删除</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.pubdate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="$router.push('/publish?id=' + scope.row.id)"
            ></el-button>

            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pageation">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          background
          :current-page="page"
          @current-change="changePageNum"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>


<script>
import { getArticle } from "@/request/api.js";
import { getArticleChannels } from "@/request/api.js";
import { deleteArticle } from "@/request/api.js";

export default {
  name: "Article",
  data() {
    return {
      form: {
        region: "",
        date1: "",
        date2: "",

        resource: "",
      },
      page: 1,
      per_page: 10,

      total: 0,
      articleList: [],
      channels: [],
      channel_id: null, // 当前频道
      status: null,
      isloading: false, // 加载
      rangeData: null,
    };
  },
  watch: {},
  created() {
    this.initArticle({
      page: this.page,
      per_page: this.per_page,
      status: this.status,
      channel_id: this.channel_id,
      begin_pubdate: this.rangeData ? this.rangeData[0] : null,
      end_pubdate: this.rangeData ? this.rangeData[1] : null,
    });

    this.initArticleChannels();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    async initArticle(params) {
      this.isloading = true;
      const { data: res } = await getArticle(params);

      this.total = res.data.total_count;
      this.articleList = res.data.results;
      this.isloading = false;
    },

    async initArticleChannels() {
      const res = await getArticleChannels();
      let { data, status } = res;

      if (status === 200) {
        this.channels = data.data.channels;
      }
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(articleId) {
      console.log("id", articleId);
      // this.articleList = this.articleList.filter(item => {
      //   return row.id !== item.id
      // })

      // console.log(index, row.id)

      this.$confirm("你确定将永久删除该作品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteArticle(articleId).then((res) => {
            console.log(res);
            // console.log("删除",res.data)
            this.$message({
              type: "success",
              message: "删除成功!",
            });

            this.initArticle({
              page: this.page,
              per_page: this.per_page,
              status: this.status,
              channel_id: this.channel_id,
              begin_pubdate: this.rangeData ? this.rangeData[0] : null,
              end_pubdate: this.rangeData ? this.rangeData[1] : null,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    changePageNum(currentPage) {
      this.page = currentPage;

      this.initArticle({
        page: this.page,
        per_page: this.per_page,
        status: this.status,
        channel_id: this.channel_id,
        begin_pubdate: this.rangeData ? this.rangeData[0] : null,
        end_pubdate: this.rangeData ? this.rangeData[0] : null,
      });
    },

    // 点击筛选
    clickSelect() {
      this.page = 1;
      this.initArticle({
        page: this.page,
        per_page: this.per_page,
        status: this.status,
        channel_id: this.channel_id,
        begin_pubdate: this.rangeData ? this.rangeData[0] : null,
        end_pubdate: this.rangeData ? this.rangeData[1] : null,
      });
    },
  },
};
</script>


<style lang="less" scoped>
.pageation {
  margin-top: 50px;
}

.check {
  background-color: #f50;
  border-color: #f50;
}

// .select_box {
//   background-color: #fff;
//   padding-bottom: 35px;
//   border-radius: 4px;
//   box-shadow: 0px 0px 58px 64px #eee;
//   .el-breadcrumb {
//     padding: 0 20px;
//     height: 60px;
//     line-height: 60px;
//     border-bottom: 2px solid #f2f2f2;
//     font-size: 16px;
//     .el-breadcrumb__item {
//     }
//   }
//   .el-form {
//     margin-top: 20px;
//     padding: 0 35px 0 20px;
//   }
// }

// .text {
//     font-size: 14px;
//   }

//   .item {
//     margin-bottom: 18px;
//   }

//   .clearfix:before,
//   .clearfix:after {
//     display: table;
//     content: "";
//   }
//   .clearfix:after {
//     clear: both
//   }

//   .box-card {
//     width: 480px;
//   }
</style>

